<template>
	<div class="custom" v-if="showIndex">
		<div class="search">
			<el-icon style="position: relative; left: -5px; top: 4px"><Search /></el-icon>
			智库搜索
		</div>
		<div style="width: 50%; margin: auto">
			<el-input v-model="documentTitle" placeholder="请输入关键字">
				<template #prepend>
					<el-select v-model="customerCategory" placeholder="选择分类" clearable style="width: 115px">
						<el-option v-for="dict in document_category" :key="dict.value" :label="dict.label" :value="dict.value" />
					</el-select>
				</template>
				<template #append>
					<el-button @click="linkTo" :icon="Search" />
				</template>
			</el-input>
		</div>
		<div class="div-button">
			<el-button class="link-button" @click="addCustom()"
				><el-icon><Edit /></el-icon>添加智库</el-button
			>
		</div>
		<div class="show">
			<div class="item" @click="toManage('1')">技术文档<br />{{ detail.technicalDocument }}</div>
			<div class="item" @click="toManage('2')">工程规范<br />{{ detail.engineeringSpecifications }}</div>
			<div class="item" @click="toManage('3')">国际&行标<br />{{ detail.internationalTradeMark }}</div>
			<div class="item" @click="toManage('4')">商务文档<br />{{ detail.businessDocuments }}</div>
			<div class="item" @click="toManage('5')">供应商资料<br />{{ detail.supplierInfo }}</div>
			<div class="item" @click="toManage('6')">管理制度<br />{{ detail.managementSystem }}</div>
			<div class="item" @click="toManage('7')">检测报告<br />{{ detail.testReport }}</div>
			<div class="item" @click="toManage('8')">培训资料<br />{{ detail.trainingMaterials }}</div>
		</div>
	</div>
	<manageView :isOpen="isOpen" :documentTitle="documentTitle" :customerCategory="customerCategory" v-else />
</template>
<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
import manageView from './tankManage.vue'
import { showDocument } from '@/api/tank/tank'
const router = useRouter()
const { proxy } = getCurrentInstance()
const { document_category } = proxy.useDict('document_category')
console.log(document_category)
const detail = ref({})
showDocument().then(res => {
	detail.value = res.data
})
const customerCategory = ref('')
const documentTitle = ref('')
const showIndex = ref(true)
const isOpen = ref(false)
const linkTo = () => {
	showIndex.value = false
}
const toManage = (value) => {
	customerCategory.value = value
	showIndex.value = false
}
const addCustom = () => {
	router.push({
		path: '/tank/tankAdd'
	})
}
</script>
<style lang="scss" scoped>
.custom {
	background-color: #f5f5f5 !important;
	text-align: center;
	position: relative;
	top: 100px;
	.search {
		text-align: center;
		font-size: 20px;
		height: 50px;
		line-height: 50px;
	}
	.div-button {
		height: 80px;
		line-height: 80px;
		.link-button {
			width: 115px;
			margin-right: 5px;
			color: #409eff;
			border-color: #409eff;
			background-color: #edf5ff;
		}
	}
	.show {
		height: 100px;
		line-height: 100px;
		text-align: center;
		.item {
			cursor: pointer;
			display: inline-block;
			width: 12%;
			height: 80px;
			line-height: 40px;
			border-right: 2px rgb(236, 233, 233) solid;
		}
		.item:last-child {
			border-right: none;
		}
	}
}
</style>
